<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import classification from '../../api/classification';

const categoryChart = ref(null);
// 窗口变化时自适应
window.addEventListener('resize', () => {
    echarts.getInstanceByDom(categoryChart.value)?.resize();
});
onMounted(() => {
    classification.getCategoryEcharts().then((res) => {
        const chart = echarts.init(categoryChart.value);
        const option = {
            title: { text: '主要文物分类统计（含待审核）', left: 'center' },
            tooltip: { trigger: 'axis' },
            xAxis: {
                type: 'category',
                data: res.data.data.map(item => item.subcategory),
                axisLabel: { rotate: 45 } // 分类名过长时旋转
            },
            yAxis: {
                type: 'value',
                min: 0,
                axisLabel: {
                    formatter: function (value) {
                        return value // 直接显示刻度值
                    }
                }
            },
            series: [{
                type: 'bar',
                data: res.data.data.map(item => item.count),
                itemStyle: { color: '#409EFF' } // Element Plus主色
            }]
        };
        chart.setOption(option);
    })
});
</script>
<template>
    <div ref="categoryChart" style="height: 400px;"></div>
</template>
<style scoped></style>